<!--  -->
<template>
  <div class="search-wrapper">
    <!-- 导航栏 -->
    <!-- <Nav :selfCenter="true">
      <template v-slot:center>
        <div class="search flex aligin-center">
          <input class="input" type="text" @input="searchProduct" v-model="searchInput">
          <span class="search-icon mr-8 ml-12"></span>
        </div>
      </template>
      <template v-slot:left>
        <span class="back-icon" @click="$router.back()"></span>
      </template>
    </Nav> -->
     <div class="search-wrapper1 flex aligin-center">
        <span class="back-icon"  @click="$router.back()"></span>
       <div
          class="search flex aligin-center"
         
        >
          <span class="search-icon mr-8 ml-12"></span>
           <input class="input" type="text" @input="searchProduct" v-model="searchInput">
        </div>
    </div>
    <div class="product-wrap">
        <Scroll
        :preventDefault="true"
        :click="true"
        :tap="true"
        :pullup="true"
        :pulldown="true"
        @scrollToEnd="scrollToEnd"
        :data.sync="productList"
        ref="myScroll"
      >
        <div>
      <ProductList :productList.sync="productList" @tapProductItem="tapProductItem"></ProductList>
        </div>
        </Scroll>
    </div>
  </div>
</template>

<script>
import Nav from "../../components/Nav";
import ProductList from "../../components/productList";
import Scroll from "../../components/Scroll";
import Page from "../../mixin/page";
import {activitySearch} from "../../api/api"
export default {
  mixins: [Page],
  components: { Nav, ProductList,Scroll },
  data() {
    return {
      timer: null, //防抖
      key:'',
      searchInput:"",
      productList: []
    };
  },
  computed: {},
  watch: {},
  methods: {
    searchProduct(e) {
      if (this.timer) {
        clearTimeout(this.timer);
        this.timer = null;
      }
      this.timer = setTimeout(() => {
        this.current_page=0
        this.last_page=1
         this.loading = false;
      this.productList = [];
        this._api()
      }, 1000);
    },
    _api(){
      activitySearch({page:this.current_page+1,kw:this.searchInput,id:this.$route.params.id}).then(({ data: { result } }) => {
        this.key=result.key
        if (result.list && result.list.length != 0) {
          this.productList = [...this.productList, ...result.list];
          this.current_page += 1;
          this.last_page = this.current_page + 1;
        } else {
          this.last_page = this.current_page;
        }
        this.loading = false;
      });
    },
    tapProductItem(item) {
      this.$router.push({
        name: "productDetail",
        params: {
          id: this.$route.params.id,
          key: this.key,
          productId: item.goods_id
        }
      });
    }
  },
  created() {},
  mounted() {
    
  },
  updated() {}, //生命周期 - 更新之后
  destroyed() {
    clearTimeout(this.timer);
    this.timer = null;
  } //生命周期 - 销毁完成
};
</script>
<style lang='less' scoped>
@import url("../../assets/style/mixin"); //引入公共css类
.search-wrapper1{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 44px;
  z-index: 100;
  background: #c91a1a;
}
.f-8{
  font-size: 8px;
}
.categories{
  margin-left: 21px; 
  .categories-icon{
    height: 18px;
    width: 18px;
    background: url("../../assets/imgs/categories.png");
    background-size: 100% 100%;
  }
}
.search {
    margin: 0 42px 0 0px;
    flex: 1;
    height: 27px;
    background: #ffffff;
    border-radius: 13px;
    .search-icon {
      height: 15px;
      width: 15px;
      .bg-image("../../assets/imgs/search-gray");
      background-size: 100% 100%;
    }
    .input {
      height: 100%;
      flex: 1;
      border-radius: 13px;
      background: #fff;
      outline: none;
    }
  }
.search-wrapper {
  height: 100%;
 
  .back-icon {
    display: inline-block;
    margin-left: 10px;
    width: 24px;
    height: 24px;
    background: url("../../assets/imgs/arrow-left-white.png");
    background-size: 100% 100%;
  }
  .product-wrap {
    padding: 45px 15px 15px;
    height: calc(100% - 45px);
    overflow: hidden;
  }
}
</style>